<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="常用文档" placeholder bgColor="#fff"></u-navbar>
    <iframe :src="form.url" style="width: 702rpx;height: 80vh;margin: 20rpx 24rpx;" name="doc" frameborder="0"></iframe>
    <view class="btn-list">
      <view class="btn1" v-if="shareFlag === ''" @click="share(true)">
        <image style="width: 28rpx;height: 28rpx;display: block;" src="../../static/my/promotionPoster1.png" mode="widthFix" />
        <text>分享</text>
      </view>
      <!-- <view class="btn2" @click="openDocument">
        <text>打开文档</text>
      </view> -->
    </view>
    <view class="p-wxcode" v-if="wechatQrCode" @click="showDetail=true">
      <image src="../../static/my/wxcode.png" />
    </view>
    <u-popup :show="showDetail" :round="20" mode="center" @close="showDetail=false" :safeAreaInsetBottom="false">
      <view style="padding: 40rpx;">
        <image style="width: 420rpx;height: 573rpx;" :src="wechatQrCode" />
      </view>
		</u-popup>
  </view>
</template>

<script>
import { wxShare } from '@/common/util'
import { getMaterialsInfo, saveLogInfo, editLogInfo } from "@/api/index";
let times = null;
let time = 0;

export default {
  data() {
    return {
      showDetail: false,
      id: '',
      form: {},
      shareFlag: '',
      userId: '',
      load: false,
      logId: '',
      wechatQrCode: '',
    };
  },
  async onLoad(options) {
    if(options.shareFlag) {
      this.shareFlag = options.shareFlag
      this.userId = options.userId
    }
    if(options.wechatQrCode) {
      this.wechatQrCode = options.wechatQrCode
    }
    if(options.invitationCode) {
      uni.setStorageSync('invitationCode', options.invitationCode)
    }
    if(options.id) {
      this.id = options.id
			uni.setStorageSync("invitationUrl", window.location.pathname + window.location.search);
      await this.getForm()
			uni.removeStorageSync("invitationUrl");
    }
  },
  methods: {
    share(f) {
      const userInfo = uni.getStorageSync('userInfo')
      const shareInfo = {
        title: this.form.title,
        link: this.httpUrl + `/pages/my/commonDocumentsDetail?id=${this.id}&shareFlag=1&userId=${userInfo.userId}`,
        imgUrl: this.form.url.split(',')[0],
      }
      shareInfo.link = shareInfo.link + '&invitationCode=' + userInfo.invitationCode
      if(userInfo.wechatQrCode) {
        shareInfo.link = shareInfo.link + '&wechatQrCode=' + userInfo.wechatQrCode
      }
      wxShare(shareInfom, f)
    },
    async getForm() {
      await getMaterialsInfo({id: this.id}).then(res => {
        this.form = res.data
        document.title = res.data.title
        if (this.shareFlag) {
          const parameter = {
            customerId: uni.getStorageSync("userInfo")
              ? uni.getStorageSync("userInfo").userId
              : "",
            promoterId: this.userId,
            materialId: this.id,
            actionType: "1",
            os: this.getOS(),
            deviceName: this.getDeviceName(),
            durationSeconds: time || 3,
            actionDesc: `浏览了【常用文档】中的【${this.form.title}】停留了${time || 3}秒`,
          };
          saveLogInfo(parameter).then(res => {
            this.logId = res.data + ''
          });
          times = setInterval(() => {
            time += 1;
          }, 1000);
        }
        this.share()
      })
    },
    openDocument() {
      // uni.setClipboardData({
      //   data: this.form.url + '?time='+((new Date()).getTime()),
      //   success: function () {
      //     uni.showModal({
      //       title: '提示',
      //       content: '复制成功,请使用系统浏览器打开.',
      //       showCancel: false,
      //       success: function (res) {
      //       }
      //     });
      //   },
      // });
      uni.downloadFile({
        url: this.form.url,
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              
            }
          });
        }
      });
      // location.replace(this.form.url)
    },
		// 获取操作系统
		getOS() {
			const ua = navigator.userAgent;
			if (ua.includes("Windows")) return "Windows";
			if (ua.includes("Mac")) return "macOS";
			if (ua.includes("Linux")) return "Linux";
			if (ua.includes("Android")) return "Android";
			if (ua.includes("iOS") || ua.includes("iPhone")) return "iOS";
			return "未知系统";
		},
		// 获取设备名称
		getDeviceName() {
			const ua = navigator.userAgent;
			if (ua.includes("iPhone")) return "iPhone";
			if (ua.includes("iPad")) return "iPad";
			if (ua.includes("Android")) return "Android手机";
			return "电脑设备";
		},
  },
	onBackPress() {
    if(this.load) {
      return
    }
		if (times) {
			clearInterval(times);
			times = null;
		}
		if(this.shareFlag) {
      const parameter = {
        customerId: uni.getStorageSync("userInfo")
          ? uni.getStorageSync("userInfo").userId
          : "",
        promoterId: this.userId,
        materialId: this.id,
        actionType: "1",
        os: this.getOS(),
        deviceName: this.getDeviceName(),
        durationSeconds: time || 3,
        actionDesc: `浏览了【常用文档】中的【${this.form.title}】停留了${time || 3}秒`,
        logId: +this.logId,
      };
      this.load = true
      editLogInfo(parameter);
    }
	},
	beforeDestroy() {
    if(this.load) {
      return
    }
		if (times) {
			clearInterval(times);
			times = null;
		}
		if(this.shareFlag) {
      const parameter = {
        customerId: uni.getStorageSync("userInfo")
          ? uni.getStorageSync("userInfo").userId
          : "",
        promoterId: this.userId,
        materialId: this.id,
        actionType: "1",
        os: this.getOS(),
        deviceName: this.getDeviceName(),
        durationSeconds: time || 3,
        actionDesc: `浏览了【常用文档】中的【${this.form.title}】停留了${time || 3}秒`,
        logId: +this.logId,
      };
      this.load = true
      editLogInfo(parameter);
    }
	},
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .btn-list {
    width: 702rpx;
    display: flex;
    gap: 24rpx;
    margin: 20rpx auto;
    justify-content: center;
    .btn1 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8rpx;
      width: 280rpx;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 200rpx;
      border: 2rpx solid #56CB03;
      font-size: 28rpx;
      color: #56CB03;
    }
    .btn2 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8rpx;
      width: 398rpx;
      height: 80rpx;
      background: #56CB03;
      border-radius: 200rpx;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
}
</style>
